<template>
	<div>
			<div class="send" v-show="showShelter"></div>
	    <div class="boxShelter" v-show="showBoxShelter"></div>
			<s-header :headerText="headerText" :isBack="isBack"></s-header>
		<div class="sengList">
				<ul class="list-warpper">
						<li
							class="floor"
							v-model="floor"
							@click="toggleDown"
							:class="{'active': showFloors}"
						>
							{{floor}}
						</li>
					<li
						class="cabinet"
						v-model="tcNumber"
						@click="toggleCabinet"
						:class="{'active': showCabinet}"
					>
						{{tcNumber}}号柜
					</li>
					<li class="btn">
						<button
							class="openbtn"
							@click="open"
						>一键开锁</button>
						<button
							class="sendbtn"
							:disabled="showbutton"
							@click='ojbk'
						>清洗完成</button>
					</li>
				</ul>
			</div>
				<transition
					mode="out-in"
					name="fade"
					enter-active-class="fadeInDown"
					leave-active-class="fadeOutUp"
				>
						<ul class="floors-wrapper-content" v-show="showFloors">
							<li
								class="item border-bottom"
								v-for="(item,index) in totalFloor"
								@click="changefloor(item,index)"
								:class="{'active': index === checkFloorIndex}"
							>
								{{item}}
							</li>
					  </ul>
				</transition>
				<transition
					mode="out-in"
					name="fade"
					enter-active-class="fadeInDown"
					leave-active-class="fadeOutUp"
				>
				<ul class="cabinet-wrapper" v-show="showCabinet">
					<li
						class="item border-bottom"
						v-for="(item,index) in totalCabinetNumber"
						@click="changeCabinet(item, index)"
						:class="{'active': index === checkCabinetIndex}"
					>
					{{item}}
					</li>
				</ul>
				</transition>
				<div class="wrapper" ref="wrapper">
					<ul>
						<li class="item border-bottom" v-for = "(item,index) in boxs" :key="index">
							<span class="iconfont icon1">&#xe614;</span>
							<div class="name">{{item.tbNumber}}号箱</div>
							<span class="iconfont icon2" v-show="item.status == 2">&#xe655;</span>
						</li>
					</ul>
				</div>
		<s-footer></s-footer>
		</div>
</template>
<script>
import SHeader from '@/components/header/Header'
import SFooter from '@/components/footer/footer'
import axios from 'axios'
import BScroll from 'better-scroll'
import { baseUrl } from '@/assets/js/var.js'
export default {
	data () {
		return {
			isBack:false,
			headerText: '清洗列表',
			floor: '请选择',//楼层名
			areaIdList:[],//楼层Id的列表
			areaNumberList:[],//楼层编号的列表
			areaId:'',//楼层Id
			areaNumber:'',//楼层编号
			tcId:'',//柜子Id
			tcNumber:'',//柜子编号
			showFloors: false,//显示楼层列表
			showCabinet: false,//显示柜子列表
			showShelter: false,//显示遮挡层
			showBoxShelter:false,//显示小遮挡层
			showbutton:true,//设置完成按钮为不可用
			checkFloorIndex: 0,
			checkCabinetIndex: 0,
			cleanerId:'',//员工工号
			cabinetNumberList:[],//柜子编号列表
			workIdList:[],//workId列表
			workId:'',//workId
			newData:[],
			boxs:[],//箱子的列表
			boxId:[],//箱子Id列表
			workBox:[]//可以开锁的保温箱id
		}
	},
	computed: {
		//获取楼层名
		totalFloor () {
			const floors = []
			if (this.newData.length) {
				this.newData.forEach(item => {
					floors.push(item.areaName)
				})
			}
			return floors
		},
		//获取楼层编号
		totalFloorNumber (){
			const floorNumber = []
			if (this.newData.length) {
				this.newData.forEach(item => {
					floorNumber.push(item.areaNumber)
				})
			}
			this.areaNumberList = floorNumber
			return this.areaNumberList
		},
		//获取楼层id
		totalFloorId (){
			const floorId = []
			if (this.newData.length) {
				this.newData.forEach(item => {
					floorId.push(item.areaId)
				})
			}
			this.areaIdList = floorId
			return this.areaIdList
		},
		//获取柜子id
		totalCabinetId () {
				const cabinets = []
				if (this.newData.length) {
					this.newData[this.checkFloorIndex].containers.forEach(item => {
						cabinets.push(item.tcId)
					})
					return cabinets
				}
		},
		//获取柜子编号
		totalCabinetNumber (){
			const cabinetNumber = []
			if (this.newData.length) {
				this.newData[this.checkFloorIndex].containers.forEach(item => {
					cabinetNumber.push(item.tcNumber)
				})
				this.cabinetNumberList = cabinetNumber
				return this.cabinetNumberList
			}
		},
		//获取workId
		totalWorkId (){
			let cabinetNumberWorkId = []
			if (this.newData.length) {
				this.newData[this.checkFloorIndex].containers.forEach(item => {
					cabinetNumberWorkId.push(item.workId)
				})
				this.workIdList = cabinetNumberWorkId
				return this.workIdList
			}
		}
	 },
	methods: {
		//显示楼层列表
		toggleDown () {
			this.showBoxShelter = !this.showBoxShelter//显示小遮挡层
			this.tcNumber = ''
			this.boxs = []
			this.showFloors = !this.showFloors
			this.showCabinet = false
		},
		//显示柜子列表
		toggleCabinet () {
			if (this.floor !== '请选择') {
				this.showBoxShelter = !this.showBoxShelter//显示小遮挡层
				this.showCabinet = !this.showCabinet
				this.showFloors = false
			}else{
				alert('请选择区域')
			}
		},
		//选择楼层
		changefloor (floor, index) {
			this.showBoxShelter = !this.showBoxShelter//显示小遮挡层
			this.showFloors = !this.showFloors//关闭楼层列表
			this.floor = floor
			this.checkFloorIndex = index
			this.areaId = this.totalFloorId[index]//获取楼层Id列表
			this.areaNumber = this.totalFloorNumber[index]//获取楼层编号
		},
		//选择柜子
		changeCabinet (item, index){
			this.showBoxShelter = !this.showBoxShelter//显示小遮挡层
			this.showCabinet = !this.showCabinet//关闭柜子列表
			this.tcId = this.totalCabinetId[index]
			this.checkCabinetIndex = index
			this.tcNumber = this.cabinetNumberList[index]
			this.workId = this.totalWorkId[index]
			this.getBoxs()
		},
		//获取箱子列表
		getBoxs (){
			if (this.areaNumber && this.tcId) {
				this.showShelter = true
				let timer = setTimeout(()=>{
						if (this.showShelter) {
							this.showShelter = false
							alert('获取箱子失败，请重试')
						}
				},5000)
				const qs = require('qs')
				let param = qs.stringify({
					'tcId':this.tcId
				})
				axios.post(`${baseUrl}/api/v1.1/washCleaner/box`,param)
				.then(response => {
					clearTimeout(timer)
					let data = response.data.code
					if (data === 7001000) {
						this.boxs = []
						this.boxId = []//开锁必须箱子编号
						this.workBox = []
						this.boxs = response.data.data.box
						this.boxId = response.data.data.openBox
						this.workBox = response.data.data.workBox
						console.log(this.workBox);
						this.showShelter = false
					}else {
						alert('保温柜或保温箱不存在')
						this.showShelter = false
					}
				})
				.catch(error =>{
					console.log(error);
				})
			}else {
				alert('请选择相应区域及柜子')
			}
		},
		//点击一键开锁
		open () {
			if (this.areaId && this.tcNumber ) {
						this.showShelter = true
						let timer = setTimeout(()=>{
								if (this.showShelter) {
									this.showShelter = false
									alert('开锁失败，请重试')
								}
						},5000)
						const qs = require('qs')
						let param = qs.stringify({
							'areaId':this.areaId,
							'tcNumber':this.tcNumber,
							'openBox': this.boxId,
							'workId':this.workId
						},{
    					arrayFormat: 'repeat'
						})
						console.log(param);
						axios.post(`${baseUrl}/api/v1.1/washCleaner/openAllLock`,param)
						.then(response =>{
							clearTimeout(timer)
							let data = response.data.code
							if (data === 7001000) {
								this.showShelter = false
								this.showbutton = false
								alert('开锁成功')
							}else if(data === 7001001){
								this.showShelter = false
								alert('开锁失败')
							}else if (data === 7001021) {
								alert('该保温柜的工作已提交完成，不能再次开锁了,请刷新页面')
								this.showShelter = false
							}else if (data === 7001030) {
								alert('当前时间不处于清洁时间段')
								this.showShelter = false
							}else {
								alert('未知错误')
								this.showShelter = false
							}
						})
						.catch(error =>{
							console.log(error);
						})
				}else {
					alert('请选择区域及柜子')
				}
		},
		//清扫员清扫完成后关闭箱子需要点击清洁完成确认
		ojbk (){
				if (this.areaNumber && this.tcId) {
					this.showShelter = true
					let timer = setTimeout(()=>{
							if (this.showShelter) {
								this.showShelter = false
								alert('确认完成失败，请重试')
							}
					},5000)
					const qs = require('qs')
					let param = qs.stringify({
						'workId': this.workId,
						'workBox':this.workBox
					},{
						arrayFormat: 'repeat'
					})
					axios.post(`${baseUrl}/api/v1.1/washCleaner/finishWork`,param)
					.then(response => {
						clearTimeout(timer)
						let data = response.data.code
						if (data === 7001000) {
							this.showShelter = false
							this.showbutton = true
							alert('清洗成功')
							this.floor = '请选择'
							this.tcNumber = ''
							this.boxs=[]
							this.getDate()
						}else if(data === 7001018){
							this.showShelter = false
							alert('请求完成工作的服务繁忙，请稍后重试')
						}else if(data === 7001019){
							this.showShelter = false
							alert('工作已经完成，不用重复提交')
						}else if(data === 7001030){
							this.showShelter = false
							alert('当前时间不处于清洁时间段')
						}else{
							this.showShelter = false
							alert('未知错误')
						}
					})
					.catch(error =>{
						console.log(error);
					})
				}else{
					alert('请选择请选择区域及柜子')
				}
		},
		//根据员工id获取所有清扫柜子编号
		getDate (){
			const qs = require('qs')
			let param = qs.stringify({
				'number':this.cleanerId
			})
			axios.post(`${baseUrl}/api/v1.1/washCleaner/areaAndContainers`,param)
			.then(response => {
				let data = response.data
				if (data.code === 7001000) {
						this.newData = data.data
						// console.log(this.newData);
					}else if (data.code === 7001010) {
						alert('未登录或登录时间超时')
						this.$router.push('/')
					}else if (data.code === 7001016) {
						alert('尚未有工作安排')
					}else {
					alert('获取数据失败')
				}
			})
			.catch(function(error){
				console.log(error);
			})
		},
		//从localStorage中获取员工的工号number
		getCleanerId (){
			if (localStorage.waterUserInfo) {
				const obj =  JSON.parse(localStorage.waterUserInfo)
				return obj.number
			}else{
				this.$router.push('/')
			}
		}
		},
	components: {
		SHeader,
		SFooter
	},
	created (){
		//获取员工id
		this.cleanerId = this.getCleanerId();
		//获取员工需要清扫的柜子
		if (this.cleanerId) {
			//console.log(this.cleanerId);
			this.getDate();
		}else{}
},
mounted (){
	 this.scroll = new BScroll(this.$refs.wrapper)
}
}
</script>
<style lang="stylus" scoped>
.send
	z-index:999
	position: absolute;
	top: 0
	right:0
	left:0
	bottom:.85rem
	background-color: rgba(0, 0, 0, 0.3);
.boxShelter
	z-index: 1
	position: absolute;
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: rgba(0, 0, 0, 0.3);
.sengList
	position: absolute
	top: .86rem
	left: 0
	right: 0
	bottom: 0
	//background-color: #eee
	.list-warpper
		z-index: 998
		position: fixed;
		border-bottom: .02rem solid #ccc
		width: 100%
		line-height: .8rem
		display: flex
		text-align: center
		font-size: .26rem
		background-color: #fff
		color: #666
		.floor
			width: 1.6rem
			font-size: .3rem
			height: .8rem
			line-height: .8rem
			&:after
				content: ""
				border: .12rem solid #999
				border-bottom: none
				border-right-color: transparent
				border-left-color: transparent
				position: relative
				top: .2rem
				left: .12rem
				border-radius: .04rem
		.active
			font-weight: 700
			color: #f40
		.cabinet
			width: 1.6rem
			font-size: .3rem
			height: .8rem
			line-height: .8rem
			&:after
				content: ""
				border: .12rem solid #999
				border-bottom: none
				border-right-color: transparent
				border-left-color: transparent
				position: relative
				top: .2rem
				left: .12rem
				border-radius: .04rem
		.active
			font-weight: 700
			color: #f40
		.btn
			flex: 1
			line-height: .8rem
			height: .8rem
			.openbtn
				width: 40%
				height: .52rem
				border-radius: .06rem
				background: #ccc
				color: #f40
				margin-right: .1rem
			.sendbtn
				width: 40%
				height: .52rem
				border-radius: .06rem
				background: #ccc
				color: #f40
.floors-wrapper-content
	z-index: 2
	overflow: hidden
	position: absolute
	top: 1.66rem
	left: 0
	right: 0
	font-weight: 200
	background: #fff
	.item
		width: 95%
		margin-left: 2.5%
		height: .6rem
		line-height: .6rem
		text-align: left
		color: #000
		font-size: .28rem
	.active
		font-weight: 700
		color: #f40
.cabinet-wrapper
	z-index: 2
	top: 1.66rem
	left: 0
	right: 0
	position: absolute
	font-weight: 200
	background: #fff
	.item
		height: .6rem
		line-height: .6rem
		text-align: left
		color: #000
		font-size: .28rem
		margin-left: .2rem
	.active
		font-weight: 700
		color: #f40
.wrapper
	position: absolute;
	overflow:hidden;
	top: 1.66rem
	left: 0
	right: 0
	bottom: .85rem
	.item
		height: 1rem
		overflow: hidden;
		box-sizing: border-box
		padding-left: .2rem
		.icon1
			float: left;
			margin-left: .2rem
			font-size: .35rem
			line-height: 1rem
			color: #20d9bb
		.icon2
			float: right;
			margin-right: .52rem
			font-size: .48rem
			line-height: 1rem
			color: red
		.name
			float: left
			margin-left: .4rem
			font-size: .35rem
			line-height: 1rem
</style>
